<template>
  <div class="logo">
    <!-- <meta http-equiv="refresh" content="10;URL=/home" /> -->
    <div class="circle"></div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            timer : null,
            count : '',
        }
    },
    methods:{
        JumpTime(){
    
        this.count = 0 ;
        this.timer = setInterval(()=>{
              if(this.count > 0 && this.count <= 20 ){
              this.count--;
              }else{
             clearInterval(this.timer);
              this.timer = null;
              this.$router.push({path: '/home'});
             }
             },5000)
        }
    },
    created(){
       this.JumpTime();
    }
}
</script>

<style scoped>
.logo {
  width: 100%;
  height: 680px;
  background: #fff;
  overflow: hidden;
}
.circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(to top, #a1c4fd, #c2e9fb);
  border-radius: 36px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -50px;
  animation: change 10s linear infinite;
}

@keyframes change {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.6);
  }
  100% {
    transform: scale(7);
  }
}
</style>